<template>
  <div class="goTop">
    <el-container>
      <el-header>
        <div style="width: 1200px;margin: 0 auto;" class="navbar">
          <el-row>
            <el-col :span="22">
              <el-menu active-text-color="black" mode="horizontal" router
                       style="font-weight: bold;height: 40px;margin-top: 20px;font-family: 仿宋,serif;">
                <h1 style="font-size: 35px;margin-top: 0">智慧医疗HIS系统</h1>
                <el-menu-item index="/index" style="margin-left: 20px;font-size: 18px;color: gray"
                              :class="{'active-btn':$route.path==='/index'}">首页</el-menu-item>
                <el-menu-item index="/HospitalIndex" style="font-size: 18px;color: gray">医院概况</el-menu-item>
                <el-menu-item index="/patient" style="font-size: 18px;color: gray"
                              :class="{'active-btn':$route.path==='/patient/appointment'
                              ||$route.path==='/patient/newAppointment'
                              ||$route.path==='/patient/information'
                              ||$route.path==='/patient/changePatient'}">我的</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="2">
              <el-popover>
                <template #reference>
                  <el-icon v-if="userToken==null" style="margin-top: 20px;text-align: center;" size="30">
                    <User/>
                  </el-icon>
                  <el-avatar v-else-if="userImgUrl==null||userImgUrl===''" src="/imgS/wujing.jpg" alt="人物头像"
                             style="width: 30px;height: 30px;margin-top: 20px"/>
                  <el-avatar v-else :src="BASE_URL+userImgUrl" alt="人物头像"
                             style="width: 30px;height: 30px;margin-top: 20px"/>
                </template>
                <div style="text-align: center" v-if="userToken==null">
                  <el-button type="info" size="small" @click="router.push('/patient/reg')">注册</el-button>
                  <el-button type="warning" size="small" @click="router.push('/patient/login')">登录</el-button>
                </div>
                <div style="text-align: center" v-else>
                  <el-row>
                    <el-col :span="12">
                      <el-button type="primary" size="small" style="float: left;width: 60px" @click="logout()">退出登录</el-button>
                    </el-col>
                    <el-col :span="12">
                      <el-button type="info" size="small" style="float: right;width: 60px" @click="router.push('/patient/changePassword')">修改密码</el-button>
                    </el-col>
                    <el-col>
                      <el-button type="danger" size="small" @click="router.push('/admin')"
                                 v-if="admin==='/admin'">后台管理</el-button>
                      <el-button type="danger" size="small" @click="router.push('/doctor')"
                                 v-if="admin==='/doctors/admin'">医生后台</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-popover>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer style="color: #89898E;height: 200px;padding-top: 50px;width:100%;margin: 0 auto;background-color: #3B3B42" >
        <p style="font-weight: bold;margin: 0;font-family: 仿宋, serif;">
          主办单位 : 达内医院 &nbsp;&nbsp;
          综合服务电话 : 120 &nbsp;&nbsp;
          急救中心电话 : 120 &nbsp;&nbsp;
          传真 : 120 &nbsp;&nbsp;
          地址 :湖北省武汉市江夏区
        </p>
        <p style="font-weight: bold;margin: 0;font-family: 仿宋, serif">版权所有 : 达内医院</p>
        <p>
          <span style="color:#89898E;font-family: 仿宋, serif">关于我们</span> |
          <span style="color:#89898E;font-family: 仿宋, serif">法律声明</span> |
          <span style="color:#89898E;font-family: 仿宋, serif">网站地图</span> |
          <span style="color:#89898E;font-family: 仿宋, serif">联系我们</span>
        </p>
      </el-footer>
    </el-container>
    <el-backtop target=".goTop">
      <i class="el-icon-caret-top">回到顶部</i>
    </el-backtop>
  </div>
</template>

<script setup>
import router from '@/router';
import {User} from "@element-plus/icons-vue";
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);
const userImgUrl = ref(localStorage.getItem('user-imgUrl')?
    JSON.parse(localStorage.getItem('user-imgUrl')):null);
const userAuthorities = ref(localStorage.getItem('user-authorities')?
    JSON.parse(localStorage.getItem('user-authorities')):null);
const userId = ref(localStorage.getItem('user-id')?
    JSON.parse(localStorage.getItem('user-id')):null);
const userUsername = ref(localStorage.getItem('user-username')?
    JSON.parse(localStorage.getItem('user-username')):null);

const admin = userAuthorities && userAuthorities.value && userAuthorities.value.length > 0 ? userAuthorities.value[0] : null;

const logout = () => {
  if (confirm('您确定要退出登录吗?')){
    axios.defaults.headers.common['Authorization']=userToken.value;
    let user = ref({});
    user.value.id = userId.value;
    user.value.username = userUsername.value;
    let data = qs.stringify(user.value);
    axios.post(BASE_URL+"/v1/users/logout",data).then((response)=>{
      if (response.data.code===20000){
        localStorage.clear();
        userToken.value = null;
        userAuthorities.value = null;
        userImgUrl.value = null;
        router.push('/login');
      }else ElMessage.error(response.data.message);
    })
  }
}

</script>

<style scoped>
.active-btn{
  color:#333 !important;
  border-bottom: 2px solid #333 !important;
}
.active-btn:hover{
  background-color: #fff!important;
}
.active-btn:focus{
  background-color: #fff!important;
}
.goTop {
  height: 100vh;
  overflow-x: hidden;
}
.navbar {
  position: fixed;
  top: 0;
  left: -15px;
  right: 0;
  height: 60px;
  background-color: #fff;
  z-index: 999;
}
</style>
